<template>
    <div class="app-container" v-loading='loading'>
        <part-comp title="审核详情" showback class="mb_15"/>
        <div class="whitebg mt_15">
            <div class="boxtitle"><span class="line"></span>审核详情</div>
            <div style='width:100%;padding-bottom:0' class="p_10" v-for="(item,index) in list" :key="index">
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <div class="whitebg detailbox flex">
                            <div class="leftimg">
                                <img src="@/assets/images/avatar.png" alt="">
                            </div>
                            <div class="itemcontent">
                                <div class="username">{{item.user?item.user.user_login:"-"}}</div>
                                <div class="checkitem flex">
                                    <span>发送时间：{{item.create_time}}</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                        <div class="whitebg detailbox flex">
                            <div class="leftimg">
                                <img src="@/assets/images/check.png" alt="">
                            </div>
                            <div class="itemcontent">
                                <div class="username" style="margin-top:10px">回复人员：{{item.check?item.check.user_login:"-"}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-form  label-width="80px" label-position="left" class="labeltitle" style="padding:0 20px">
                    <el-form-item label="标题:" prop="remark">
                        <span>{{item.title||'-'}}</span>
                    </el-form-item>
                    <el-form-item label="内容:" prop="remark">
                        <span>{{item.msg||'-'}}</span>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        
    </div>
</template>

<script>
import PartComp from '@/components/PartComp';
import { getmsgDetail } from '@/api/message';
export default {
    components:{
        PartComp
    },
    data(){
        return {
            loading:false,
            detailId:'',
            datail:{},
            list:[],
            form:{
                msg:''
            },
            undodialog:false
        }
    },

    created(){
        console.log('type:',this.$route.query);
        let {id} = this.$route.query;
        if(id){
            this.detailId=id;
            this.getDetail();
        }
    },

    methods:{
        
        getDetail(){
            this.loading=true;
            getmsgDetail({id:this.detailId}).then(res=>{
                if(res.code == 1){
                    this.list=res.data;
                }
                this.loading=false;
            })
        },

        goBack(){
            this.$router.back();
        },


        handleclose(){
            this.undodialog = false
        },
    }
}
</script>

<style lang="scss" scoped>
.detailbox{
    width: 100%;
    padding: 10px;
}
.leftimg{
    width: 40px;
    height: 40px;

    img{
        width: 100%;
        height: 100%;
    }
}
.itemcontent{
    width: calc(100% - 40px);
    margin-left: 25px;
    &>div{
        margin-bottom: 5px;
    }

    .username{
        font-size: 14px;
        font-weight: 500;
    }

    .checkitem,.remark{
        width: 100%;
        color: #8E8E8E;
        font-size: 14px;
    }
    .mltime{
        display: inline-block;
        margin-left: 6%;
    }
}
.boxtitle{
    color: #2F86FD;
    font-weight: 500;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    .line{
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #2F86FD;
        margin-right: 10px;
    }
}
.labeltitle{
    .el-form-item{
        margin-bottom: 10px;
    }
}
</style>